<template>
  <main class="page-history">
    <canopy-check @caonpyChange="change" :value="state.canopyCode"></canopy-check>
    <div class="history-list">
      <nut-cell
        center
        is-link
        desc="查看详情"
        v-for="(item, index) in state.sqcbHistoryList"
        :key="index"
        @click="itemClick(item)"
        class="van-hairline--bottom"
      >
        <template v-slot:icon>
          <img
            class="nut-icon nut-icon__img"
            :src="item.image ? 'https://fmzk.harvest-code.com/api' + item.image : dfimage"
          />
        </template>
        <template v-slot:title> 识别时间：{{ item.dataTime }}</template>
      </nut-cell>
    </div>
  </main>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import canopyCheck from '@/components/canopyCheck'
import { usePullDownRefresh, useReachBottom } from '@/hooks/life'
import { ref, onMounted, reactive } from 'vue'
import { useDidShow, useTabItemTap, useLoad } from '@tarojs/taro'
import { sqcbHistoryListData } from '@/services/apis/history'
const dfimage = require('@/assets/icons/dfimage.png')
const state = reactive({
  canopyCode: '',
  sqcbHistoryList: [],
  pageNo: 1,
  pageSize: 10,
  alertType: '',
  count: 0
})

useLoad(option => {
  state.canopyCode = option.id
  getList()
})
const change = val => {
  console.log('val', val)
  state.canopyCode = val
  state.pageNo = 1
  state.sqcbHistoryList = []
  getList()
}

const itemClick = item => {
  Taro.navigateTo({ url: `/pagesSub/history/item/index?id=${item.id}` })
}
const getList = () => {
  sqcbHistoryListData({
    pageNo: state.pageNo,
    pageSize: state.pageSize,
    canopyCode: state.canopyCode
  }).then(data => {
    state.sqcbHistoryList = [].concat(state.sqcbHistoryList, data.data.list)
    state.count = data.data.count
  })
}
usePullDownRefresh(() => {
  state.pageNo = 1
  state.sqcbHistoryList = []
  getList()
})
useReachBottom(() => {
  if (state.pageNo * state.pageSize < state.count) {
    state.pageNo++
    getList()
  }
})
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-radius: 4px;
.page-history {
  .nut-cell {
    margin: 0;
    padding: 13px 10px;
    box-shadow: none;
    border-radius: 0;
  }
  .nut-cell__icon {
    position: relative;
    margin-right: 5px;
    border-radius: $border-radius;
    overflow: hidden;
  }
  .nut-cell__link {
    font-size: $font-size-0;
  }

  .nut-icon__img {
    width: 40px;
    height: 40px;
  }
  .nut-cell__value {
    font-size: $font-size-1;
  }
  .history-list {
    padding: 0 10px;
    padding-top: 40px;
  }
}
</style>
